<template>
	<div class="commission">
		<div class="breadcrumb">财务管理-职位佣金</div>
		<div class="TalentResume">
			<div class="Ltop">
				<div
					v-for="(item,index) in btnlist"
					:key="index"
					:class="{active:item.isActive}"
					@click="doClick(index)">
					{{item.name}} <span v-if="index==0">{{commissionData.pendingPayment}}个</span>
					<span v-if="index==1">{{commissionData.payment}}个</span>
				</div>
			</div>
			<div class="Lcontent">
				<div class="lleftWrap" >
					<div v-for="(item,value) in platform" :key="value" :class="item.isactive?'active':'de'" style="">
						<div class="popover" @click="doshowCompany(item.id,value)" style="height: 70px;">
							<div class="fdr">
								<div class="defaultImg">
									<img :src="defaultImg"  >
								</div>
								<div class="lconsultant">
									<div style="{color:#1b1b1b}" class="platformName">{{item.platformName}}</div>
									<div class="color6b">ID：{{item.id}}</div>
								</div>
							</div>
							<div class="color6b">{{item.phone}}</div>
						</div>
					</div>
				</div>
				<div class="Lleft">
					<div
						v-for="(item2,value) in company"
						:key="item2.id"
						:class="{active:item2.isactive,btn:true}">
						<div @click="doshowJob(item2.id,value)" class="bdb">{{item2.companyName}}</div>
					</div>
				</div>
				<div class="Lleft">
					<div v-for="(item3,value) in job" :key="value" :class="{active:item3.isactive,btn:true}">
						<div @click="doshowTalent(item3.id,value)" class="bdb" >{{item3.jobTitle}}</div>
					</div>
				</div>
				<div id="LRight">
					<el-table
						:data="talent"
						style="width: 100%"
						header-row-class-name="tableheader"
						cell-class-name="tableRow">
						<el-table-column prop="name" label="人才姓名" min-width="80"></el-table-column>
						<el-table-column prop="occupation" label="执业类型(人才)" min-width="120">
							<template slot-scope="scope">
								<el-popover
										placement="bottom-end"
										width="200"
										trigger="hover">
									<div v-html="scope.row.occupation" style="text-align: center"></div>
									<div slot="reference" v-html="scope.row.short"></div>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column prop="inTime" label="入职时间"></el-table-column>
						<el-table-column prop="bonus" label="职位佣金" min-width="80">
							<template slot-scope="scope">
								<div class="col_red">{{scope.row.bonus?scope.row.bonus+'k':''}}</div>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<div
									class="tablepay"
									@click="doPopup(scope.row.deliveryRecordId)">{{msg}}
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
			<el-pagination
					style="text-align: right;margin-right: 40px"
					background
					@current-change="pageChange"
					:current-page.sync="query.currPageNo"
					:page-size="query.pageSize"
					layout="total,prev, pager, next"
					:total="query.total"
			></el-pagination>
			<!--弹窗-->
			<div class="lPopup" v-show="islabel==true">
				<div class="lPopup_box">
					<div class="box_header">
						<i class="bleft"></i>
						<span>确认支付</span>
						<i @click="doBartender1" class="el-icon-close fl"></i>
					</div>
					<div class="box_body">
						<div class="really">确认该企业职位佣金已支付？</div>
						<p>确认后状态不可修改</p>
						<div class="lzhifu">
                            <div v-for="(item,index) in pws">
                                <input type="text" v-model="pws[index]" v-focus="index==aindex?true:false" :data-id="index"
                                       @input="inputPwd" maxlength="1">
                            </div>
						</div>
						<p class="tal">请输入6位确认密码</p>
						<div class="lbtn">
							<button class="close" @click="doBartender1">取消</button>
							<button class="affirm" @click="doBartender">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "commission",
		data() {
			return {
				msg: "确认支付",
				btnlist: [
					{ name: "企业待支付", isActive: true},
					{ name: "企业已支付", isActive: false}
				],
				query: {
					currPageNo: 1,
					pageSize: 30,
					total:0
				},
				commissionData: [],
				defaultImg: require("@/assets/logo.png"),
				islabel: false,
				platform: [],
				company: [],
				job: [],
				talent: [],
				state: "",
				counselorId: "",
				deliveryRecordId: "",
				inputPsd: "",
                pws: ['', '', '', '', '', ''],
                aindex:0,
				comId:undefined
			};
		},
        directives: {
            'focus'(el, binding, vnode) {
                // console.log(binding)
                if (binding.value) {
                    el.focus();
                } else {
                    el.blur();
                }
                el.onfocus = function () {}
                el.onblur = function () {}
            }
        },
		methods: {
			pageChange() {
				this.doshowTalent()
			},
            inputPwd(e) {
                if (parseInt(e.target.dataset.id) + 1 >= this.pws.length) {
                    this.aindex = parseInt(e.target.dataset.id);
                } else {
                    this.aindex = parseInt(e.target.dataset.id) + 1;
                }
            },
			doClick(obj) {
				console.log(obj);
				this.btnlist.forEach(item => {
					item.isActive = false;
				});
				this.btnlist[obj].isActive = true;
				if (obj == 1) {
					this.msg = "已支付";
					if (this.msg = "已支付"){
                        this.islabel = false
                    }
					if(this.commissionData.payment==0){
                        this.job = [];
                        this.talent = [];
                        this.company = [];
                    }
				} else {
					this.msg = "确认支付";
                    if(this.commissionData.pendingPayment==0){
                        this.job = [];
                        this.talent = [];
                        this.company = [];
                    }
				}
				this.lAxios({
					method: "post", //方法
					url: "/platform/getCommission.do", //路径，基础路径在main.js里面配置
					params: {
						//传参
						state: obj,
						currPageNo: this.query.currPageNo,
						pageSize:this.pageSize
					}
				}).then(res => {
						//成功的回调函数
						//获得总数据
						console.log(res.data.data)
						if (res.data.data) {
							this.commissionData = res.data.data;
							if(this.commissionData.hasOwnProperty('commissionTalent')){
								//获得平才顾问信息
								this.platform = this.commissionData.commissionUser.list;
								//获得企业信息
								this.company = this.commissionData.commissionFullName;
								this.comId = this.company[0].id
								//获得职业信息
								this.job = this.commissionData.commissionJobName;
								//获得人才信息
								this.talent = this.commissionData.commissionTalent;
								for(let item of this.talent){
									if(item.occupation.indexOf(',')!=-1){
										item.short = item.occupation.split(',')[0]+"..";
									}else{
										item.short = item.occupation;
									}
									item.occupation = _g.getdotAreaTo(item.occupation);
								}
								this.query.total = this.commissionData.commissionUser.total;
								//console.log("talent",this.talent)
								this.defaultImg = this.commissionData.commissionUser[0].headImage;
							}else{
								this.company = [];
								this.job = [];
								this.talent = [];
								this.platform = []
								this.query.total = 0;
							}
						}
					}).catch(err => {
						//失败的回调函数
						console.log(err);
					});
				this.state = obj;
			},
			//进入密码支付弹窗
			doPopup(obj) {
                //console.log("index",obj)
                if(this.state==1)return
				//设置obj获取的id等于我需要的简历ID
				this.pws = ['', '', '', '', '', ''];
				this.deliveryRecordId = obj;
				this.islabel = true;
			},
			//确认支付密码
			doBartender() {
				this.inputPsd = this.$b.inputPwdMerge(this.pws);
				// this.deliveryRecordId = this.doPopup();
				this.lAxios({
					method: "post", //方法
					url: "/platform/confirmPayment.do",
					params: {
						//传参
						// inputPsd:this.inputPsd,
						inputPsd: this.inputPsd,
						deliveryRecordId: this.deliveryRecordId
					}
				}).then(res => {
						if (res.data.status == 0) {
							this.islabel = false;
							console.log(this.msg);
							if (this.msg == "确认支付") {this.doClick(0);}
						} else {
							//如果失败,输入密码窗口不消失
							this.islabel = true;
						}
					}).catch(err => {
						//失败的回调函数
						console.log(err);
					});

				this.islabel = false;
			},
			doBartender1() {
				//取消密码窗口
				this.islabel = false;
			},
			//获得企业名称
			doshowCompany(obj, value) {
				this.platform.forEach(item => {
					item.isactive = false;
				});
				this.platform[value].isactive = true;
				this.lAxios({
					method: "post",
					url: "/platform/getCommissionFullName.do",
					params: {
						state: this.state,
						counselorId: obj
					}
				}).then(res => {
						//console.log("com",res.data.data);
						if (res.data.data) {
							this.company = res.data.data.data.commissionFullName;
							//获得职业信息
							this.job = res.data.data.data.commissionJobName;
							//获得人才信息
							this.talent = res.data.data.data.commissionTalent;
                            for(let item of this.talent){
                                if(item.occupation.indexOf(',')!=-1){
                                    item.short = item.occupation.split(',')[0]+"..";
                                }else{
                                    item.short = item.occupation;
                                }
                                item.occupation = _g.getdotAreaTo(item.occupation);
                            }
						}
					})
					.catch(err => {
						//失败的回调函数
						console.log(err);
					});
			},
			//获取职业信息
			doshowJob(obj, value) {
				this.comId=obj
				this.company.forEach(item => {
					item.isactive = false;
				});
				this.company[value].isactive = true;
				this.lAxios({
					method: "post", //方法
					url: "/platform/getCommissionJobName.do", //路径，基础路径在main.js里面配置
					params: {
						//传参
						state: this.state,
						companyId: obj
					}
				}).then(res => {
						console.log(res.data.data);
						this.job = res.data.data.data.commissionJobName;
						this.talent = res.data.data.data.commissionTalent;
                        for(let item of this.talent){
                            if(item.occupation.indexOf(',')!=-1){
                                item.short = item.occupation.split(',')[0]+"..";
                            }else{
                                item.short = item.occupation;
                            }
                            item.occupation = _g.getdotAreaTo(item.occupation);
                        }
					}).catch(err => {console.log(err);});
			},
			doshowTalent(obj, value) {
				console.log(obj)
				this.job.forEach(item => {
					item.isactive = false;
				});
				this.job[value].isactive = true;
				this.lAxios({
					method: "post", //方法
					url: "/platform/getCommissionTalent.do", //路径，基础路径在main.js里面配置
					params: {
						//传参
						state: this.state,
						jobId: obj,
						comId: this.comId,
						// pageSize:20
					}
				}).then(res => {
						console.log(res.data.data.data);
						this.talent = res.data.data.data;
                        for(let item of this.talent){
                            if(item.occupation.indexOf(',')!=-1){
                                item.short = item.occupation.split(',')[0]+"..";
                            }else{
                                item.short = item.occupation;
                            }
                            item.occupation = _g.getdotAreaTo(item.occupation);
                        }
					})
					.catch(err => {
						//失败的回调函数
						console.log(err);
					});
			}
		},
		created() {
			this.doClick(0);
		}
	};
</script>

<style lang="scss">
	.commission {
		box-sizing: border-box;
		width: 100%;
		.breadcrumb {
			margin: 10px 10px;
			font-size: 14px;
			color: #333;
		}
		.TalentResume {
			box-sizing: border-box;
			width: 100%;
		}
		.Ltop {
			margin-top: 10px;
			margin-left: 10px;
			padding: 15px 50px;
			margin-bottom: 20px;
			height: 50px;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			cursor: default;
			.active {
				background-color: #37f;
				border: none;
				color: #fff;
			}
		}

		.Ltop > div {
			// margin: 15px 50px;
			margin-right: 20px;
			width: 125px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			box-sizing: border-box;
			border: 1px solid rgb(211, 219, 255);
			border-radius: 5px;
			font-size: 14px;
		}

		.Lcontent {
			height: calc(100vh - 280px);
			padding-top: 0px;
			width: 100%;
			display: flex;
			flex-direction: row;
			background:#F7F9FC ;
		}
		.lleftWrap {
			width: 200px;
			margin-right: 5px;
			background-color: #fff;
			cursor: default;
			border: 2px solid #f2f2f2;
			.active {
				border-left:3px solid #3377FF;
				background-color: rgba(51, 119, 255, 0.08);
				border-bottom: #f2f2f2 1px solid;
				.platformName{
					font-weight: 700;
					color: #3377FF;
				}
			}
			.de{
				border-left:3px solid #fff;
				background-color:#fff;
				border-bottom: #f2f2f2 1px solid;
			}
			.popover {
				height: 40px;
				margin: 0 10px;
				padding-top: 10px;
				text-align: center;
				/*border: 2px solid red;*/
				.fdr {
					display: flex;
					flex-direction: row;
					.defaultImg {
						width: 40px;
						height: 40px;
						margin: 0 10px 5px 0;
						img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
				.color6b {
					color: #6b6b6b;
					font-size: 14px;
				}
			}
		}

		.Lleft {
			width: 150px;
			background-color: #fff;
			margin-right: 5px;
			font-size: 14px;
			border: 2px solid #f2f2f2;
			color: #333;
			> div {
				padding: 0 10px;
			}
			.active {
				background-color: rgba(51, 119, 255, 0.08);
				background-clip: border-box;
				.bdb{
					font-weight: 700;
					color: #3377FF;
				}
			}
			.bdb {
				height: 60px;
				border-bottom: #f2f2f2 1px solid;
                letter-spacing:-1px;
                display: flex;
                align-items: center;
				justify-content: center;
                text-align: center;
			}
		}

		#LRight {
			background-color: #fff;
			flex: 1;
			padding: 15px 30px;
			.el-table {
				.tableheader {
					color: #333;
					font-size: 14px;
					th {
						text-align: center;
					}
				}
				.tableRow {
					color: #333;
					font-size: 14px;
					text-align: center;
					// margin-bottom: 10px;
					padding: 5px 0;
					background-color: #f7f9fc;
					background-clip: content-box;
					line-height: 50px;
					height: 50px;
					border: none;
					.cell {
						height: 50px;
						line-height: 50px;
						.tablepay {
							margin: 5px auto;
							// padding: 10px 50px;
							height: 40px;
							line-height: 40px;
							border-radius: 5px;
							/*border: 1px solid #37f;*/
							color: #37f;
							cursor: pointer;
						}
						.bordernone {
							border: none;
							background-color: #f7f9fc;
						}
					}
					.col_red {
						color: red;
					}
				}
			}
		}
		.lPopup {
			width: 100%;
			height: 100%;
			z-index: 99;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}
		.lPopup_box {
			width: 400px;
			background-color: white;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.box_header {
				height: 40px;
				background-color: #f7f9fc;
				padding: 0 15px;
				display: flex;
				align-items: center;
				.bleft {
					flex: 0.3;
					width: 3px;
					height: 16px;
					background-color: #3377ff;
					box-sizing: border-box;
					border: rgb(211, 219, 255) 1px solid;
					margin: 12px 10px;
				}
				span {
					font-size: 16px;
					font-weight: 700;
					color: #333;
					flex: 100;
				}
				i {
					flex: 5;
				}
			}
		}
		.box_body {
			padding: 25px 55px;
			text-align: center;
			.really {
				margin: 20px 0;
				font-size: 16px;
				color: #1f2e4d;
			}
			p {
				font-size: 14px;
				color: #f00;
			}
			.tal {
				text-align: left;
				margin-bottom: 60px;
			}
		}
		.lbtn {
			display: flex;
			justify-content: space-between;
			button {
				width: 140px;
				height: 40px;
				border: 1px solid rgb(230, 233, 240);
				background-color: rgb(247, 249, 252);
				border-radius: 5px;
				// margin-bottom: 10px;
			}
			.affirm {
				background-color: #3377ff;
				color: #fff;
			}
		}

		.lzhifu {
			// width: 300px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 30px auto 5px;
			input {
				width: 30px;
				height: 30px;
				border: 1px solid rgb(230, 233, 240);
				border-radius: 3px;
                text-align: center;
			}
		}
	}
</style>
